<template>
    <div>
        <div>大文件切片导入导出</div>
        <input type="file"
            ref="fileInput"
            style="display: none"
            accept=".xlsx, .xls"
            @change="handleFileChange">
        <el-button type="primary" @click="handleImport">导入</el-button> 
        
        
        <el-button type="success" @click="exportTableToExcel">导出</el-button>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="日期" width="180" />
            <el-table-column prop="name" label="姓名" width="180" />
            <el-table-column prop="age" label="年龄" width="180" />
            <el-table-column prop="address" label="Address" />
        </el-table>
    </div>
</template>

<script  setup>
import * as XLSX from 'xlsx';
import { ref } from 'vue';
const tableData = ref([]);
// 分片导出excel
const exportTableToExcel = () => {
    
    // 1、表头映射：将英文表头替换为中文
    const headers = {
        id: '日期',
        name: '姓名',
        age: '年龄',
        address: '地址'
    };

    // 2、分片大小（每片 1000 行）
    const chunkSize = 1000;

    // 3、创建新的工作簿
    const workbook = XLSX.utils.book_new();

    // 4、分片处理数据
    for (let i = 0; i < tableData.value.length; i += chunkSize) {
        const chunk = tableData.value.slice(i, i + chunkSize);

        // 将分片数据转换为工作表
        const worksheet = XLSX.utils.json_to_sheet(chunk);
        console.log(i,worksheet);
        
        // 替换表头为中文
        const range = XLSX.utils.decode_range(worksheet['!ref']);
        for (let C = range.s.c; C <= range.e.c; ++C) {
            const address = XLSX.utils.encode_cell({ r: range.s.r, c: C });
            if (worksheet[address]) {
                const key = worksheet[address].v;
                worksheet[address].v = headers[key];
            }
        }

        // 将工作表添加到工作簿中，命名为 Sheet1, Sheet2, ...
        XLSX.utils.book_append_sheet(workbook, worksheet, `Sheet${i / chunkSize + 1}`);
    }

    // 5、将工作簿写入文件并触发下载
    XLSX.writeFile(workbook, '分片导出.xlsx');
}
// 分片导入excel
// 触发文件选择
// 导入
const fileInput = ref(null);
const handleImport = () => {
    fileInput.value.click();
};
const handleFileChange = (event) => {
    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload =  async (e) => {
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, { type: 'array' });

        // 获取第一个工作表
        const sheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[sheetName];

        // 将工作表转换为 JSON 数据
        const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

        // 处理表头和数据
        const headers = jsonData[0]; // 第一行为表头
        const rows = jsonData.slice(1); // 剩余行为数据

        // 分片大小（每片 1000 行）
        const chunkSize = 100;

        // 分片处理数据
        for (let i = 0; i < rows.length; i += chunkSize) {
            const chunk = rows.slice(i, i + chunkSize);
            console.log(i,chunk);
            
            // 将分片数据映射到 tableData
            const newData = chunk.map((row) => {
                return {
                    id: row[0],
                    name: row[1],
                    age: row[2],
                    address: row[3]
                };
            });

            // 更新表格数据
            tableData.value = tableData.value.concat(newData);

            // 模拟分片延迟（可选）
            await new Promise((resolve) => setTimeout(resolve, 100));
        }
    };
    reader.readAsArrayBuffer(file);
};



</script>